<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/header.css">
		<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css ">

		<style type="text/css">
			.mui-content,
			body {
				background: rgba(0, 170, 255, 0.1);

			}

			img {
				margin-top: 25%;
			}
		</style>
	</head>


	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
			<h1 class="mui-title">头像信息</h1>
			<a id="openMenu" class="mui-icon mui-icon-more mui-icon-right-nav mui-pull-right" style="color: white;"></a>
		</header>


		<div class="mui-content">
			<img id="my_face">
		</div>

		<div id="sheet-myface" class="mui-popover mui-popover-bottom mui-popover-action ">
			<!-- 可选择菜单 -->
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a id="link_img" href="#">
						<span type="button" class="layui-btn" id="test1">
							<i class="layui-icon">&#xe67c;</i>
							<span>上传图片</span>
						</span>
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a id="save_img" href="#">
						<span type="button" class="layui-btn">
							<i class="layui-icon">&#xe601;</i>
							<span>下载图片</span>
						</span>
					</a>
				</li>
			</ul>
			<!-- 取消菜单 -->
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#sheet-myface">
						<span type="button" class="layui-btn">
							<i class="layui-icon">&#x1006;</i>
							<span>取消</span>
						</span>
					</a>
				</li>
			</ul>
		</div>

	</body>
	<script src="../js/mui.js"></script>
	<script src="../js/app.js"></script>
	<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
	<script type="text/javascript">
		mui.init({
				swipeBack: true //启用右滑关闭功能
			});

		mui.plusReady(function() {
			var user = app.getUserGlobalInfo();
			var img_myface = document.getElementById("my_face");
			// console.log(user.faceImage.substring(0,4)==="http");
			console.log(JSON.stringify(user));

			var imgURL = user.faceImage.substring(0, 4) === "http" ? user.faceImageBig : app.imgServerUrl + user.faceImageBig;
			img_myface.src = imgURL;
			var imgWidth = document.body.clientWidth;
			img_myface.width = imgWidth;
			img_myface.height = imgWidth;

			//个人头像菜单按钮设置
			document.getElementById("openMenu").addEventListener("tap", function() {
				mui("#sheet-myface").popover("toggle");
			})
			//保存图片
			document.getElementById("save_img").addEventListener("tap", function() {
				plus.nativeUI.showWaiting("下载中...");
				var download = plus.downloader.createDownload(imgURL, {}, function(d, status) {
					if (status == 200) {
						plus.nativeUI.closeWaiting();
						console.log("下载成功");
						plus.gallery.save(d.filename, function() {
							app.showToast("保存图片成功", "success");
						})
					} else {
						plus.nativeUI.closeWaiting();
						app.showToast("保存失败", "error");
						console.log("保存失败");
					}
				});
				//启动下载任务
				download.start();

			})


			layui.use('upload', function() {
				var user = app.getUserGlobalInfo();
				var upload = layui.upload;
				//执行实例
				var uploadInst = upload.render({
					elem: '#test1', //绑定元素
					url: app.serverUrl + '/user/uploadFaceBase64', //上传接口
					data: {
						userId: user.id
					},
					method: 'post', //HTTP请求类型
					done: function(res) {
						console.log(JSON.stringify(res));
						if (res.status == 200) {
							var userInfo = res.data;
							app.setUserGlobalInfo(userInfo);
							mui("#sheet-myface").popover("toggle");
							// 页面跳转 重载
							var wobj = plus.webview.getWebviewById("wh-myface.html");
							wobj.reload(true);
							
							mui.openWindow({
								id: 'wh-me.html',
								url: 'wh-me.html'
							});
						} else {
							app.showToast(res.msg, "error");
						}
						layer.closeAll('loading');
						//上传完毕回调
					},
					error: function() {
						layer.msg(data.msg);
						layer.closeAll('loading');
						//请求异常回调
					}
				});
			});
		})
	</script>
</html>
